<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useUserStore } from '../stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const activeIndex = ref('')

watch(() => route.path, (newPath) => {
  activeIndex.value = newPath
}, { immediate: true })

const userRole = computed(() => userStore.userInfo?.role || '')
const username = computed(() => userStore.userInfo?.username || '')

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}
</script>

<template>
  <el-container class="layout-container">
    <el-header class="top-header">
      <div class="logo-container">
        <h3 class="logo-text">地铁站点分析系统</h3>
      </div>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        class="top-menu"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#409EFF"
        router
      >
        <!-- 游客和管理员都可见的菜单 -->
        <el-menu-item index="/basic-query">
          <el-icon><i class="el-icon-search" /></el-icon>
          <span>路线和站点查询</span>
        </el-menu-item>
        <el-menu-item index="/buffer-analysis">
          <el-icon><i class="el-icon-data-analysis" /></el-icon>
          <span>周边设施分析</span>
        </el-menu-item>

        <!-- 仅管理员可见的菜单 -->
        <template v-if="userRole === 'admin'">
          <el-menu-item index="/station-management">
            <el-icon><i class="el-icon-setting" /></el-icon>
            <span>站点管理</span>
          </el-menu-item>

          <el-menu-item index="/line-management">
            <el-icon><i class="el-icon-menu" /></el-icon>
            <span>线路管理</span>
          </el-menu-item>

          <el-sub-menu index="5">
            <template #title>
              <el-icon><i class="el-icon-data-analysis" /></el-icon>
              <span>统计分析管理</span>
            </template>
            <el-menu-item index="/statistics">数据统计</el-menu-item>
            <el-menu-item index="/analysis">数据分析</el-menu-item>
            <el-menu-item index="/passenger-flow-analysis">客流量分析</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>
      <div class="header-right">
        <span class="welcome-text">欢迎您，{{ username }}</span>
        <el-avatar
          :size="32"
          :src="''"
          class="user-avatar"
        >
          <template #default>
            <el-icon><User /></el-icon>
          </template>
        </el-avatar>
        <el-button
          type="danger"
          size="small"
          plain
          class="logout-btn"
          @click="handleLogout"
        >
          退出登录
        </el-button>
      </div>
    </el-header>

    <el-main class="main-content">
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-header {
  background-color: #001529;
  display: flex;
  align-items: center;
  padding: 0;
  height: 64px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.logo-container {
  width: 240px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 0.3s;

  .logo-text {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    background: linear-gradient(90deg, #409EFF, #67C23A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.top-menu {
  flex: 1;
  border-bottom: none;
  height: 100%;

  :deep(.el-menu-item) {
    transition: all 0.3s;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  padding-right: 24px;
  color: white;

  .welcome-text {
    margin-right: 16px;
    font-size: 14px;
    font-weight: 500;
  }

  .user-avatar {
    margin-right: 16px;
    transition: all 0.3s;

    &:hover {
      transform: scale(1.1);
    }
  }
}

.logout-btn {
  font-size: 13px;
  transition: all 0.3s;

  &:hover {
    background-color: #f56c6c !important;
    color: #fff !important;
    transform: translateY(-2px);
  }
}

.main-content {
  padding: 24px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  background-color: #f5f7fa;
}
</style>
